import { Component, Vue, Prop, Emit, Watch } from "vue-property-decorator";
import {
  NavigationProps,
  NavigationTabProps,
} from "@/components/__utils__/prop";
import classNames from "classnames";
import warning from "@/utils/warning";

const name = "Navigation";

@Component({
  name,
})
class Navigation extends Vue implements NavigationProps {
  readonly navigationClass = "a-navigation";
  public activeKey: string | number = "";
  @Prop()
  styles!: any;
  @Prop()
  height!: string | number;
  @Prop()
  className!: string;
  @Prop()
  navigationMenu!: Array<NavigationTabProps>;
  @Prop()
  isRouter!: boolean;
  @Prop()
  defaultActiveKey!: string | number;
  static install: (Vue: any) => void;

  @Emit("click")
  listenerClick(
    activeKey: string | number,
    routerPath?: string,
    tar?: NavigationTabProps
  ) {
    const { isRouter } = this.$props;
    if (isRouter && routerPath) {
      this.$router.push({
        path: routerPath,
        replace: true,
      });
    }
    this.activeKey = activeKey;
    return {
      activeKey,
      routerPath,
      tar,
    };
  }

  @Watch("$route", {
    deep: true,
  })
  changeActiveKey(value: { [key: string]: any }) {
    this.activeKey = this.navigationMenu.findIndex(
      (route) => route.routerPath === value.path
    );
  }
  created() {
    const { defaultActiveKey, navigationMenu } = this.$props;
    const { $route } = this;
    const activeSoft = navigationMenu.find(
      (item: NavigationTabProps) => item.routerPath === $route.path
    );
    if (defaultActiveKey) {
      if (activeSoft.path === $route.path) {
        this.activeKey = defaultActiveKey;
      } else {
        this.activeKey = activeSoft.id;
      }
    }
  }

  render() {
    const { $props, navigationClass, activeKey } = this;
    const { styles, height, className, navigationMenu } = $props;
    const style = styles || {
      height: height ? height : "50px",
    };
    const navigationClassName = classNames(navigationClass, className);
    if (!navigationMenu || !navigationMenu.length) {
      warning(!!navigationMenu, "navigation navigationMenu", "required");
      return null;
    }

    return (
      <div class={navigationClassName} {...{ style }}>
        {navigationMenu.map((tab: NavigationTabProps) => {
          return (
            <div
              class={
                Number(activeKey) === tab.id
                  ? `${navigationClass}-tab ${navigationClass}-tab-active`
                  : `${navigationClass}-tab`
              }
              onclick={() => {
                this.listenerClick(tab.id, tab.routerPath, tab);
              }}
            >
              <img
                src={
                  Number(activeKey) === tab.id
                    ? require(`@/assets/img/${tab.activeImgHref}`)
                    : require(`@/assets/img/${tab.defaultImgHref}`)
                }
                alt={tab.label}
              />
              <span
                class={`${navigationClass}-tab-text ${
                  tab.badge ? navigationClass + "-tab-badge" : ""
                }`}
              >
                {tab.label}
              </span>
            </div>
          );
        })}
      </div>
    );
  }
}

Navigation.install = function(Vue) {
  Vue.component(name, Navigation);
};

export default Navigation;
